import React, { useState } from 'react'
import "./index.css"

export default function Item({ todo, done, id, todoList, setTodoList }) {
  const [isActive, setIsActive] = useState(false)

  const mouseHandle = (bool) => {
    return () => {
      setIsActive(bool)
    }
  }

  // 多选框触发改变的事件函数
  const checkChangeHandle = (e) => {
    const newTodo = todoList.map(item => {
      if (item.id === id) {
        item.done = e.target.checked
      }
      return item
    })
    setTodoList(newTodo)
  }

  return (
    <li
      onMouseEnter={mouseHandle(true)}
      onMouseLeave={mouseHandle(false)}
      className={isActive ? "active" : ""}
    >
      <label>
        <input type="checkbox" checked={done} onChange={checkChangeHandle} />
        <span>{todo}</span>
      </label>
      <button className="btn btn-danger" style={{ display: isActive ? "block" : "none" }}>删除</button>
    </li>
  )
}
